<template>
    <div class="item">
        <div v-bind:class="[searchVisible? 'weui-search-bar_focusing' :'','weui-search-bar']">
            <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" placeholder="搜索" required="" ref="searchInput" v-bind:value="value" v-on:input="$emit('valueChange',$event.target.value)" >
                <a href="javascript:" class="weui-icon-clear" v-on:click="clearInput"></a>
            </div>
            <label class="weui-search-bar__label" v-on:click="showSearchBar" v-if="!searchVisible">
                <i class="weui-icon-search"></i><span>搜索</span>
            </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" v-on:click="hideSearchBar">取消</a>
        </div>
    </div>
</template>
<script>
export default {
    model: {
        prop: "value", //绑定的值，通过父组件传递
        event: "valueChange"//自定义事件
    },
    props: {
        value: String
    },
    data () {
        return {
            searchVisible: false
        }
    },
    computed: {
        inputListeners () {
            var vm = this;
            return Object.assign({}, this.$listeners, {
                input (event) {
                    vm.$emit('input', event.target.value);
                }
            })
        }
    },
    methods: {
        showSearchBar () {
            this.searchVisible = true;
            this.$refs.searchInput.focus();
        },
        hideSearchBar () {
            this.$emit('valueChange','');
            this.searchVisible = false;
        },
        clearInput () {
            this.$refs.searchInput.value = '';
            this.$emit('valueChange','');
            this.$refs.searchInput.focus();
        }
    }
}
</script>
<style>

</style>